import React, { useState, useEffect } from 'react';
import { Icon } from 'choerodon-ui/pro';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Choerodon } from '@choerodon/master';
import {
  text1, text2, text3,
} from './Constant';
import { pipeLineApi } from '@/api/pipeLine';

import './index.less';

export default function GitlabRunner() {
  useEffect(() => {
    pipeLineApi.getParams().then((res) => {
      setParamsObj(res);
    });
  }, []);
  const [paramsObj, setParamsObj] = useState({});

  const prefixCls = 'c7ncd-pipelineManage-runner';
  const options = {
    format: 'text/plain',
  };

  const handleCopy = () => {
    Choerodon.prompt('复制成功');
  };

  return (
    <div className={`${prefixCls}`}>
      <p>
        Gitlab CI 是 Gitlab 集成的开源持续集成服务，Gitlab Runner 是 GitLab CI 的实现工具。
        我们使用 Gitlab CI 进行自动化构建制品、代码测试以及将结果发回给 Choerodon猪齿鱼等任务。
        <br />
        <br />
        Gitlab Runner 安装方式有很多种，本文以 kubernetes 安装方式进行讲解，若使用其他方式，请参考
        {' '}
        <a target="_blank" href="https://docs.gitlab.com/runner/install/index.html" rel="noreferrer">Gitlab 官网</a>
      </p>
      <h3>前置要求</h3>
      <p>1.Container Runtime 采用 docker 的 kubernetes 集群</p>
      <p>2.已安装 helm 命令行并能访问 kubernetes 集群</p>
      <p>3.已安装 NFS Provisioner 或有其他动态存储</p>
      <h3>安装流程</h3>
      <p>第一步：获取 Gitlab Runner 注册 Token</p>
      <p>
        点击
        <a href={paramsObj['gitlab-group-url']}>这里</a>
        进入项目对应的 Gitlab Group 设置页面，选择 Settings
        {' '}
        {'>'}
        {' '}
        CI/CD
        并展开菜单
      </p>
      <div className="image-1" />
      <p>此时我们获取到了 Gitlab 的访问地址以及 Gitlab Runner 的注册 Token。</p>
      <p>第二步：添加 choerodon chart 仓库</p>
      <pre className="code">
        {text1}
        <CopyToClipboard text={text1} onCopy={handleCopy} options={options}>
          <Icon type="library_books" className="copy-button" />
        </CopyToClipboard>
      </pre>
      <p>第三步：创建存储卷</p>
      <p>
        创建存储卷是为了存放在进行 Gitlab CI 时所产生的制品或缓存的依赖包，
        从而可以使用上一阶段所产生的制品或加速构建。
      </p>
      <p>创建 maven 依赖存储卷</p>
      <pre className="code">
        {text2}
        <CopyToClipboard text={text2} onCopy={handleCopy} options={options}>
          <Icon type="library_books" className="copy-button" />
        </CopyToClipboard>
      </pre>

      <p>创建其他缓存存储卷</p>
      <pre className="code">
        {text3}
        <CopyToClipboard text={text3} onCopy={handleCopy} options={options}>
          <Icon type="library_books" className="copy-button" />
        </CopyToClipboard>
      </pre>

      <div className="gitlab-runner-table">
        <table border="1">
          <tr>
            <td>参数</td>
            <td>含义</td>
          </tr>
          <tr>
            <td>accessModes</td>
            <td>存储卷访问模式（请勿更改）</td>
          </tr>
          <tr>
            <td>requests.storage</td>
            <td>申请存储卷空间大小</td>
          </tr>
          <tr>
            <td>storageClassName</td>
            <td>动态存储类名称</td>
          </tr>
        </table>
      </div>

      <p>第四步：安装 Gitlab Runner</p>
      <p>编写配置文件 gitlab-runner.yaml</p>
      <pre className="code">
        {`## 第一步中获取的 Gitlab 的访问地址，地址要加上传输协议（http 或者 https）
## ref: https://docs.gitlab.com/runner/commands/README.html#gitlab-runner-register
##
gitlabUrl: https://code.choerodon.com.cn

## 第一步中获取的 Gitlab Runner 的注册 Token
## ref: https://docs.gitlab.com/ce/ci/runners/README.html
##
runnerRegistrationToken: ""

## 配置同一时间执行任务的最大数量
## ref: https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-global-section
##
concurrent: 5

## 获取新任务的时间间隔（秒）
## ref: https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-global-section
##
checkInterval: 3

## 配置 Runner 服务的 CPU 与内存资源请求及限制
## ref: http://kubernetes.io/docs/user-guide/compute-resources/
##
resources: 
  limits:
    memory: 256Mi
    cpu: 200m
  requests:
    memory: 128Mi
    cpu: 100m

## 启用 RBAC 支持:
rbac:
  create: true

## Runner服务为每个新任务启动的Pod的配置
##
runners:
  # 更多Runner配置可访问Gitlab官网进行查看
  # runner configuration: https://docs.gitlab.com/runner/configuration/advanced-configuration.html
  config: |
    [[runners]]
      # 输出日志最大容量
      output_limit = 51200
      [runners.kubernetes]
          namespace = "{{.Release.Namespace}}"
          image = "registry.cn-shanghai.aliyuncs.com/c7n/cibase:0.11.4"
          privileged = true
          pull_policy = "if-not-present"
          # 任务Pod的CPU及内存请求与限制
          cpu_limit = "4"
          cpu_request = "1"
          memory_request = "3Gi"
          memory_limit = "6Gi"
          # 挂载第三步中创建的缓存目录
          [runners.kubernetes.volumes]
            [[runners.kubernetes.volumes.pvc]]
              name = "runner-cache-pvc"
              mount_path = "/cache"
              readonly = false
            [[runners.kubernetes.volumes.pvc]]
              name = "runner-maven-pvc"
              mount_path = "/root/.m2"
              readonly = false`}
        <CopyToClipboard
          text={`## 第一步中获取的 Gitlab 的访问地址，地址要加上传输协议（http 或者 https）
          ## ref: https://docs.gitlab.com/runner/commands/README.html#gitlab-runner-register
          ##
          gitlabUrl: https://code.choerodon.com.cn
          
          ## 第一步中获取的 Gitlab Runner 的注册 Token
          ## ref: https://docs.gitlab.com/ce/ci/runners/README.html
          ##
          runnerRegistrationToken: ""
          
          ## 配置同一时间执行任务的最大数量
          ## ref: https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-global-section
          ##
          concurrent: 5
          
          ## 获取新任务的时间间隔（秒）
          ## ref: https://docs.gitlab.com/runner/configuration/advanced-configuration.html#the-global-section
          ##
          checkInterval: 3
          
          ## 配置 Runner 服务的 CPU 与内存资源请求及限制
          ## ref: http://kubernetes.io/docs/user-guide/compute-resources/
          ##
          resources: 
            limits:
              memory: 256Mi
              cpu: 200m
            requests:
              memory: 128Mi
              cpu: 100m
          
          ## 启用 RBAC 支持:
          rbac:
            create: true
          
          ## Runner服务为每个新任务启动的Pod的配置
          ##
          runners:
            # 更多Runner配置可访问Gitlab官网进行查看
            # runner configuration: https://docs.gitlab.com/runner/configuration/advanced-configuration.html
            config: |
              [[runners]]
                # 输出日志最大容量
                output_limit = 51200
                [runners.kubernetes]
                    namespace = "{{.Release.Namespace}}"
                    image = "registry.cn-shanghai.aliyuncs.com/c7n/cibase:0.11.4"
                    privileged = true
                    pull_policy = "if-not-present"
                    # 任务Pod的CPU及内存请求与限制
                    cpu_limit = "4"
                    cpu_request = "1"
                    memory_request = "3Gi"
                    memory_limit = "6Gi"
                    # 挂载第三步中创建的缓存目录
                    [runners.kubernetes.volumes]
                      [[runners.kubernetes.volumes.pvc]]
                        name = "runner-cache-pvc"
                        mount_path = "/cache"
                        readonly = false
                      [[runners.kubernetes.volumes.pvc]]
                        name = "runner-maven-pvc"
                        mount_path = "/root/.m2"
                        readonly = false`}
          onCopy={handleCopy}
          options={options}
        >
          <Icon type="library_books" className="copy-button" />
        </CopyToClipboard>
      </pre>

      <p>执行安装</p>
      <pre className="code">
        {`helm install runner c7n/gitlab-runner
    -f gitlab-runner.yaml
    --version 0.39.0
    --namespace c7n-system`}
        <CopyToClipboard
          text={`helm install runner c7n/gitlab-runner
          -f gitlab-runner.yaml
          --version 0.39.0
          --namespace c7n-system`}
          onCopy={handleCopy}
          options={options}
        >
          <Icon type="library_books" className="copy-button" />
        </CopyToClipboard>
      </pre>
    </div>
  );
}
